<template>
  <div class="wb_keyword_reply">
    <el-row><el-button type="primary" @click="handleAddRule" class="btn-addRule">添加规则</el-button></el-row>
    <div v-for="item,n in keywordReply.list" class="ruleItem">
      <h3 class="rule-hd">
        <span>{{item.name ? '规则' + n + '：' + item.name : '新规则'}}</span>
        <i v-if="n !== curIndex" class="el-icon-caret-bottom" @click="handleExpand(n)"></i>
        <i v-else class="el-icon-caret-top" @click="curIndex=null"></i>
      </h3>
      <div class="rule-bd">
        <div v-if="curIndex !== n" class="preview">
          <div class="field-wrap cl">
            <div class="field-tit">关键词：</div>
            <div class="field-bd">{{item.keywords}}</div>
          </div>
          <div class="field-wrap cl">
            <div class="field-tit">回复：</div>
            <div class="field-bd">
              1条{{item.msgType}}
            </div>
          </div>
        </div>
        <div v-else class="edit">
          <div class="row cl">
            <div class="field-tit">规则名：</div>
            <div class="field-bd">
              <el-input v-model="item.name"></el-input>
              <span>规则名最多60字</span>
            </div>
          </div>
          <div class="row">
            关键字
            <a class="fr" type="text" @click="curIndex=n;newKeywords=[];newKeyword='';showDialog1=true">添加关键字</a>
          </div>
          <ul v-if="item.keywords" class="kwList row">
            <li v-for="kw,i in item.keywords.split(',')">
              <span>{{kw}}</span>
              <div class="op">
                <i class="icon icon-delete" @click="handleDelKey(n, i)"></i>
              </div>
            </li>
          </ul>
          <div class="row">回复</div>
          <div class="row">
            <el-input type="textarea" v-model="item.content"></el-input>
          </div>
          <div class="foot row">
            <el-button type="primary" @click="handleSave(n)" :loading="isSave">保存</el-button>
            <el-button @click="handleDel(n)" :loading="isDel">删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加关键字弹层 -->
    <el-dialog title="添加关键字" :visible.sync="showDialog1" class="dialog_addKeyword">
      <el-input v-model="newKeyword" type="textarea" :rows="5" @keyup.enter.native="handleAddKey"></el-input>
      <div class="tips">输入回车可添加多个关键字，每个关键字少于30个字符</div>
      <el-tag
        v-for="tag,n in newKeywords"
        :key="n"
        :closable="true"
        @close="handleCloseTag(n)"
      >
      {{tag}}
      </el-tag>
      <div slot="footer">
        <el-button type="primary" @click="handleSaveAddKW">保存</el-button>
        <el-button @click="showDialog1=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        appid: this.$route.params.appid,
        curIndex: null,
        newKeyword: '',
        newKeywords: [],
        showDialog1: false,
        isSave: false,
        isDel: false,
        page: 1,
        size: 10
      }
    },
    mounted () {
      this.getReplys()
    },
    computed: {
      ...mapState('weiboManage', {
        keywordReply: state => state.kwReply
      })
    },
    methods: {
      ...mapActions('weiboManage', ['getKwReply', 'setKwReply', 'delKwReply']),
      getReplys () {
        this.getKwReply({
          appid: this.appid,
          page: this.page,
          size: this.size
        })
      },
      // 展开规则
      handleExpand (index) {
        this.curIndex = index
      },
      // 添加规则
      handleAddRule () {
        this.curIndex = 0
        this.keywordReply.list.unshift({
          type: 1
        })
      },
      // 添加关键字
      handleAddKey () {
        const kw = this.newKeyword.slice(0, -1)
        if (kw.length > 30) {
          this.$message.warning('关键词长度不超过30')
          this.newKeyword = ''
          return false
        }
        this.newKeywords.push(kw)
        this.newKeyword = ''
      },
      // close关键字tag
      handleCloseTag (n) {
        this.newKeywords.splice(n, 1)
      },
      // 添加关键字保存
      handleSaveAddKW () {
        const kw = this.newKeyword
        if (kw.length > 30) {
          this.$message.warning('关键词长度不超过30')
          this.newKeyword = ''
          return false
        }
        const curRule = this.keywordReply.list[this.curIndex]
        this.newKeyword && this.newKeywords.push(this.newKeyword)
        let keywords = this.newKeywords.join(',')
        if (curRule.keywords) {
          curRule.keywords += ',' + keywords
        } else {
          curRule.keywords = keywords
        }
        this.showDialog1 = false
      },
      // 删除关键字
      handleDelKey (n, i) {
        const curRule = this.keywordReply.list[n]
        let arr = curRule.keywords.split(',')
        arr.splice(i, 1)
        curRule.keywords = arr.join(',')
      },
      // 校验
      submitCheck (index) {
        const curRule = this.keywordReply.list[index]
        if (!curRule.name) {
          this.$message.warning('请输入规则名称')
          return false
        }
        if (!curRule.keywords) {
          this.$message.warning('请输入关键词')
          return false
        }
        if (!curRule.content) {
          this.$message.warning('请输入回复内容')
          return false
        }
        return true
      },
      // 保存
      async handleSave (index) {
        if (!this.submitCheck(index)) {
          return false
        }
        const curRule = this.keywordReply.list[index]
        this.isSave = true
        const res = await this.setKwReply({
          ...curRule,
          appid: this.appid,
          messageId: this.keywordReply.list[this.curIndex].id
        })
        this.isSave = false
        if (res.data.code === 1) {
          this.$message.success('保存成功')
          this.curIndex = null
          this.getReplys()
        }
      },
      // 删除
      async handleDel (index) {
        const messageId = this.keywordReply.list[index].id
        if (messageId) {
          this.isDel = true
          const res = await this.delKwReply({
            appid: this.appid,
            messageId: messageId
          })
          this.isDel = false
          if (res.data.code === 1) {
            this.$message.success('删除成功')
            this.getReplys()
          }
        } else {
          this.keywordReply.list.shift()
        }
      }
    }
  }
</script>
<style lang="scss">
  .wb_keyword_reply{
    &{max-width:1000px;}
    .field-tit{text-align:left;}
    .field-bd{margin-left:80px;}
    .btn-addRule{float:right;margin: -46px 0 15px 0;}
    .ruleItem{margin-bottom:20px;border:1px solid #e7e7eb;}
    .rule-hd{padding-left:10px;height:40px;line-height:40px;background:#f4f5f9;border-bottom:1px solid #e7e7eb;font-weight:500;}
    .el-icon-caret-bottom,.el-icon-caret-top{float:right;margin:15px 20px 0 0;font-size:12px;cursor:pointer;color:#c6c6c6;}
    .rule-bd{
      .preview{padding:14px;}
        .row{margin-bottom:-1px;padding: 10px 14px;border-bottom:1px solid #e7e7eb;font-size:14px;}
      .edit{
        .el-input{margin-right:10px;width:50%}
        a{color:rgb(29, 144, 230);cursor:pointer;}
      }
      .kwList{
        &{padding: 0 14px;}
        .icon{cursor:pointer;color:#8d8d8d}
        li{padding-left:20px;height:50px;line-height:50px;border-bottom:1px solid #e7e7eb}
        li:last-child{border-bottom:0;}
        .op{float:right;margin-top:-1px;}
      }
      .foot{background:#f4f5f9;text-align:right;}
    }
    .dialog_addKeyword{
      .tips{margin:10px 0;color:#8d8d8d}
      .el-tag{margin-right:10px;}
    }
  }
</style>
